<!-- 修改个人信息 -->
<template>
    <div>
       <Title title="修改密码"></Title>
    </div>
    <!-- 修改密码 -->
    <div class="form-box">
       <el-form ref="ruleFormRef" style="max-width: 100%;height: 40px;" :model="editForm" status-icon :rules="rules" label-width="auto"
       class="demo-ruleForm">
 
       <!-- rules表单验证规则 -->
        <!-- prop model 键名 -->
       <el-form-item label="原密码" prop="password"  style="height: 40px;"> 
          <el-input v-model="editForm.password" type="password" autocomplete="off" style="height: 40px;" />
       </el-form-item>
 
       <el-form-item label="新密码" prop="newPwd" style="height: 40px;">
          <el-input v-model="editForm.newPwd" type="password" autocomplete="off"    style="height: 40px;"/>
       </el-form-item>
       
       <el-form-item label="确认新密码" prop="checkPss"   style="height: 40px;">
         <el-input v-model="editForm.checkPss" type="password" autocomplete="off"   style="height: 40px;"/>
     </el-form-item>
 
       <el-form-item style="margin-left: 92px;">
          <el-button type="primary" @click="submitForm()" style="height: 40px;line-height: 40px;padding: 12px 20px;">
             立即修改
          </el-button>
       </el-form-item>
    </el-form>
    </div>
 </template>
 
 <script setup>
 import Title from '@/views/home/component/Title.vue';
 import { reactive, ref } from 'vue'
 import {editPassword} from '@/api/users';
 import { ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';

 const router = useRouter();
 const user = JSON.parse(sessionStorage.getItem('user'));
 const ruleFormRef = ref()
 const editForm = reactive({
    password: '',
    newPwd: '',
    checkPss: ''
 })
 
 
 const validatePass = (rule, value, callback) => {
    if (value === '') {
       callback(new Error('请输入老密码'));
    }
    callback();
 }
 const validateNewPwd = (rule, value, callback) => {
    if (value === '') {
       callback(new Error('请输入新密码'))
    } 
   callback()
 }
 const validateNewPwd2 = (rule, value, callback) => {
    if (value === '') {
       callback(new Error('请再次输入新密码'))
    } else if (value !== editForm.newPwd) {
       callback(new Error("请保存密码一致!"))
    } else {
       callback()
    }
 }

 const rules = reactive ({
   password: [{ required:true,validator: validatePass, trigger: 'blur' }],
   newPwd: [{required:true, validator: validateNewPwd, trigger: 'blur' }],
   checkPss: [{ required:true,validator: validateNewPwd2, trigger: 'blur' }],
 })
 
 const submitForm = async() => {
   ruleFormRef.value.validate(async(ref)=>{
      if(ref){
         console.log(1);
         //调用修改接口
         const {code,msg} = await editPassword({newPwd:editForm.newPwd,id:user.id,oldPwd:editForm.password});
         console.log(code,msg);
         if(code==0){
            ElMessage.success(msg);
            //跳到登录页面
            router.push('/login');
         }else{
            ElMessage.error(msg);
         }
      }else{
         ElMessage.error('请输入正确的信息')
      }
   })
 }
 

 </script>
 
 <style scoped>
 .form-box{
    height: 260px;
    padding: 10px 10px 10px 40px;
    /* padding-left:50px; */
 }
 </style>